<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Widgets Test/Demo</title>

<script type="text/javascript">

	var djConfig = {isDebug: true};

	//djConfig.debugAtAllCosts = true;

</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script language="JavaScript" type="text/javascript">

	dojo.require("dojo.widget.HtmlLayoutPane");
	dojo.require("dojo.widget.HtmlSplitPane");
	dojo.require("dojo.widget.HtmlColorPalette");
	dojo.require("dojo.widget.HtmlFisheyeList");
	dojo.require("dojo.widget.Editor");	
	dojo.require("dojo.widget.Tree");
	dojo.require("dojo.widget.HtmlTabs");
	dojo.hostenv.writeIncludes();
</script>
  <style>
    html, body{	
		width: 100%;	/* make the body expand to fill the visible window */
		height: 100%;
		overflow: hidden;	/* erase window level scrollbars */
		padding: 0 0 0 0;
		margin: 0 0 0 0;
    }

	.dojoHtmlFisheyeListItemLabel {
		color: black;
	}
	
	.dojoHtmlFisheyeListBar {
		margin: 0 auto;
		text-align: center;
	}

   </style>
</head>
<body>
<div dojoType="LayoutPane"
	layoutChildPriority='top-bottom'
	style="border: 2px solid black; width: 100%; height: 100%;">
	
	<div id="topMenu" dojoType="LayoutPane" layoutAlign="top" style="background-color: #274383; color: white; font: bold;">
		<u>F</u>ile <u>Edit</u> <u>V</u>iew <u>H</u>elp
	</div>

	<div dojoType="LayoutPane" layoutAlign="client">
		<div dojoType="SplitPane"
			orientation="horizontal"
			sizerWidth="5"
			activeSizing="0"
			style="width: 100%; height: 100%;"
		>
			<div id="tree" dojoType="SplitPanePanel" sizeMin="20" sizeShare="20">
				<div dojoType="Tree" publishSelectionTopic="treeSelected" toggle="fade">
				    <div dojoType="TreeNode" title="Item 1">
				        <div dojoType="TreeNode" title="Item 1.1"><br/></div>
				        <div dojoType="TreeNode" title="Item 1.2">
				            <div dojoType="TreeNode" title="Item 1.2.1"></div>
				            <div dojoType="TreeNode" title="Item 1.2.2"></div>
				        </div>
				        <div dojoType="TreeNode" title="Item 1.3">
				            <div dojoType="TreeNode" title="Item 1.3.1"></div>
				            <div dojoType="TreeNode" title="Item 1.3.2"></div>
				        </div>
				        <div dojoType="TreeNode" title="Item 1.4">
				            <div dojoType="TreeNode" title="Item 1.4.1"></div>
				        </div>
				    </div>
				</div>
			</div>

			<div dojoType="SplitPanePanel" sizeMin="50" sizeShare="100">
				<div dojoType="SplitPane"
					orientation="vertical"
					sizerWidth="5"
					activeSizing="0"
					style="width: 100%; height: 100%;"
				>
					<div id="contents" dojoType="SplitPanePanel" sizeMin="20" sizeShare="50">
						<ul dojoType="tabs">
							<li dojotype="tab" label="Pending">
								<ol><li>taxes</li><li>expense report</li></ol>
							</li>
							<li dojotype="tab" label="Waiting">
								<ol><li>research results</li></ol>
							</li>
							<li dojotype="tab" label="Done">
								<ol><li>documentation</li><li>unit tests</li></ol>
							</li>
						</ul>
					</div>
					<div dojoType="SplitPanePanel" sizeMin="20" sizeShare="50">
						<div class="page dojo-Editor" style="background: white; border: solid blue;"
							style="width: 100%; height: 100%; overflow: auto">
							<h3>Editable Content With Default Toolbar</h3>
							<ul>
								<li>Sed congue.</li>
								<li>Aenean blandit sollicitudin mi.</li>
								<li>Maecenas pellentesque.</li>
								<li>Vivamus ac urna.</li>
							</ul>
							<p>
								Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
								suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
								Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
								bibendum sit amet, semper quis, aliquet nec, sapien.  Aliquam
								aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
								ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
								dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
								quam.
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- bottom pane.  set overflow:visible so that the fisheye menu icons don't get cut off when
		they expand -->
	<div id="bottomMenu" dojoType="LayoutPane" layoutAlign="bottom"
		style="background-color: #274383; color: white; overflow: visible; text-align: center;" align="center">
		<div align="center">
			<div dojoType="FisheyeList"
				itemWidth="50" itemHeight="50"
				itemMaxWidth="200" itemMaxHeight="200"
				orientation="horizontal"
				effectUnits="2"
				itemPadding="10"
				attachEdge="bottom"
				labelEdge="top"
				enableCrappySvgSupport="false"
			>
			
				<div dojoType="FisheyeListItem" onClick="load_app(1);" 
					iconsrc="images/icon_browser.png" caption="Web Browser">
				</div>
			
				<div dojoType="FisheyeListItem" onClick="load_app(2);"
					iconsrc="images/icon_calendar.png" caption="Calendar">
				</div>
			
				<div dojoType="FisheyeListItem" onClick="load_app(3);"
					iconsrc="images/icon_email.png" caption="Email">
				</div>
			
				<div dojoType="FisheyeListItem" onClick="load_app(4);"
					iconsrc="images/icon_texteditor.png" caption="Text Editor">
				</div>
			
				<div dojoType="FisheyeListItem" onClick="load_app(5);"
					iconsrc="images/icon_update.png" caption="Software Update">
				</div>
			
				<div dojoType="FisheyeListItem" onClick="load_app(6);"
					iconsrc="images/icon_users.png" caption="Users" >
				</div>
			</div>
		</div>
	</div>

</div>
</body>
</html>